<template>
  <CustomSearch
      :searchField="queryList"
      :searchData="state.queryData"
      :searchBarButton="btnList"
      :labelWidth="80"
  >
  </CustomSearch>
  <CustomTable
      :tableHead="col"
      :isShowIndex="true"
      :isLoading="state.isLoading"
      :tableData="state.tableData"
      :tableOperateBar="operates"/>
  <Pagination v-show="state.totalRows > 0"
              :total="state.totalRows"
              v-model:page="state.page"
              v-model:limit="state.limit"
              @pagination="getList"/>
  <CustomDialog
      v-model:visible="state.movieVisible"
      :destroyOnClose="true"
      :title="state.movieName"
  >
    <template #default>
      <videoPlay
          v-bind="options"
          :poster="state.poster"/>
    </template>
  </CustomDialog>
</template>

<script lang="ts" setup name='HotMovie'>
import {} from 'vue'
import {MovieService} from "../../../api/movie";
import 'vue3-video-play/dist/style.css'
import videoPlay from 'vue3-video-play'

const state = reactive({
  page: 1,
  limit: 10,
  isLoading: false,
  //总条数
  totalRows: 0,
  //视频弹框
  movieVisible: false,
  //表格数据
  tableData: [],
  //视频封面
  poster: '',
  //视频标题
  movieName: '',
  //查询的数据
  queryData: {
    movieName: ''
  },
})

//搜索栏
const queryList: ISearchField[] = [
  {
    label: '电影名',
    field: 'movieName',
    span: 5,
    inputType: 'string'
  },
]

//播放视频
const playVideo = (row: any) => {
  state.movieName = row.movieName
  options.src = row.srcUrl
  options.poster = row.imgUrl
  state.movieVisible = true
}

//获取表格数据
const getList = () => {
  state.isLoading = true
  MovieService.list({...state.queryData, "currentPage": state.page, "pageSize": state.limit})
      .then(({data}) => {
        data.resultObj?.rows.forEach((e:any) => {
          e.fileUrl = import.meta.env.VITE_BASE_URL + e.fileUrl
        })
        state.tableData = data.resultObj?.rows
        state.totalRows = data.resultObj?.totalRows
        state.isLoading = false
      })
      .catch(e => {
        state.isLoading = false
      })
}

//搜索栏按钮
const btnList: ISearchBarButton[] = [
  {
    label: '查询',
    type: 'primary',
    method: () => {
      getList()
    },
  },
]


//表格列配置
const col: ITableHead[] = [
  {
    label: '电影名',
    field: 'movieName',
    width: 200,
    inputType: 'readonly',
  },
  {
    label: '封面',
    field: 'imgUrl',
    inputType: 'image',
    width: 230,
  },
]

//表格按钮
let operates: ITableOperateBar = {
  width: 150,
  list: [
    {
      label: "播放",
      type: 'primary',
      method: (index: number, row: any) => {
        playVideo(row)
      },
    },
  ],
}

// 视频播放
const options = reactive({
  width: "800px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  //poster: import.meta.env.VITE_BASE_URL + '/image/2023_01_29/313d6e7acf044632a06fc583fbd42341.png', //封面
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  //ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
  type: 'm3u8'
})

onMounted(() => {
  getList()
})
</script>

<style scoped lang='less'>

</style>
